import icon1 from "./icon.jpg";

const mapBg_2 = document.createElement("img");
mapBg_2.src = "./icon.jpg";
console.log("mapBg_2", mapBg_2);

export default function useEchartMapOption(mapName: string) {
  const compId = mapName;

  function getOption() {
    let option = {
      cusWidth: 3,
      backgroundColor: "",
      legend: {
        show: false,
      },
      tooltip: {
        trigger: "item",
        borderWidth: 0,
        borderColor: "transparent",
        background: "transparent",
        extraCssText:
          "background: transparent !important; color: transparent !important;box-shadow:none;border:none;",
      },
      geo3D: {
        show: false,
        map: compId,
        viewControl: {
          beta: 0,
          alpha: 35,
          panMouseButton: "right",
          rotateMouseButton: "left",
        },
        realisticMaterial: {
          // detailTexture:
          //   "http://192.168.100.222:9050/webapp/data/static/comp/map/detail.webp",
          textureTiling: 1,
          roughness: 1,
          metalness: 0,
          roughnessAdjust: 0,
        },
        light: {
          main: {
            color: "#ffffff",
            intensity: 1.2,
            shadow: true,
            shadowQuality: "ultra",
          },
          ambient: {
            color: "#000000",
            intensity: 0.1,
          },
        },
        itemStyle: {
          borderWidth: 2,
          borderColor: "#fff",
          shadowBlur: 150,
          opcity: 1,
        },
        shading: "realistic",
        label: {
          show: true,
          fontSize: 14,
          color: "#f9fcff",
          fontWeight: 600,
          fontFamily: "Courier New",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            color: "#f9fcff",
            fontWeight: 600,
          },
          itemStyle: {
            borderWidth: 1,
            borderColor: "#4fdcf7",
          },
        },
        groundPlane: false,
        zlevel: -1,
      },
      geo: {
        map: compId,
        show: true,
        roam: true,
        zlevel: 2,
        tooltip: {
          show: true,
          padding: [6, 10],
          backgroundColor: "rgba(255,255,255,.8)",
          borderColor: "#fff",
          borderRadius: "10px",
          textStyle: {
            align: "left",
            verticalAlign: "middle",
            lineHeight: 26,
            color: "rgba(0,0,0,.7)",
          },
        },
        name: "数据",
        animation: false,
        aspectScale: 1,
        zoom: 0.6,
        showLegendSymbol: false,
        label: {
          show: true,
          color: "rgba(255,255,255,1)",
          fontSize: 14,
        },
        itemStyle: {
          areaColor: "rgba(0,54,105,1)",
          borderColor: "rgba(63,218,255,.6)",
          borderWidth: 1,
          shadowColor: "rgba(63, 218, 255,0.6)",
          shadowBlur: 35,
          fontSize: 100,
        },
        emphasis: {
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 10,
          },
          itemStyle: {
            areaColor: "rgba(255,240,64,.5)",
            borderColor: "rgba(255,255,255,1)",
            borderWidth: 1,
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "160%",
        markPoint: {
          symbol: "none",
        },
      },
      series: [
        {
          tooltip: {
            show: true,
            padding: [6, 10],
            backgroundColor: "rgba(255,255,255,.8)",
            borderColor: "#fff",
            borderRadius: "10px",
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              lineHeight: 26,
              color: "rgba(0,0,0,.7)",
            },
          },
          name: "数据",
          type: "map",
          map: compId,
          animation: false,
          roam: true,
          aspectScale: 1,
          zoom: 0.6,
          zlevel: 111,
          // blendMode: "clear",
          // zoom: -100, //缩放
          showLegendSymbol: false,
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 14,
          },
          itemStyle: {
            areaColor: "rgba(0,54,105,1)",
            borderColor: "rgba(63,218,255,.6)",
            borderWidth: 1,
            shadowColor: "rgba(63, 218, 255,0.6)",
            shadowBlur: 35,
            fontSize: 100,
          },
          emphasis: {
            label: {
              show: true,
              color: "rgba(255,255,255,1)",
              fontSize: 10,
            },
            itemStyle: {
              areaColor: "rgba(255,240,64,.5)",
              borderColor: "rgba(255,255,255,1)",
              borderWidth: 1,
            },
          },
          layoutCenter: ["50%", "50%"],
          layoutSize: "160%",
          markPoint: {
            symbol: "none",
          },
          data: [
            {
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  properties: {
                    popupContent: "广州体育馆",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.29631, 23.188776],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "东坑山",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.344891, 23.204986],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "南潮高尔夫俱乐部",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.343166, 23.232884],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "南方医科大学",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.352652, 23.193294],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "大源洞",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.376511, 23.248027],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "广州天河汽车客运站",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.357251, 23.174956],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "云台花园",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.306084, 23.163793],
                  },
                },
              ],
            },
          ],
        },
        {
          type: "scatter",
          _cione_layer: true,
          coordinateSystem: "geo",
          showEffectOn: "render",
          zlevel: 100,
          tooltip: {
            show: true,
            padding: [6, 10],
            backgroundColor: "rgba(255,255,255,.8)",
            borderColor: "#fff",
            borderRadius: "10px",
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              lineHeight: 26,
              color: "rgba(0,0,0,.7)",
            },
          },
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: "fill",
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: "rgba(29,233,182,1)",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "rgba(29,233,182,1)",
              shadowBlur: 10,
              shadowColor: "rgba(51,51,3,1)",
            },
          },
          symbolSize: 16,
          symbol: "",
          data: [
            {
              value: [113.29631, 23.188776],
              itemStyle: {
                color: "rgba(0, 206, 209, 1)",
              },
              popupContent: "广州体育馆",
            },
            {
              value: [113.344891, 23.204986],
              itemStyle: {
                color: "rgba(0, 206, 209, 1)",
              },
              popupContent: "东坑山",
            },
            {
              value: [113.343166, 23.232884],
              itemStyle: {
                color: "rgba(0, 206, 209, 1)",
              },
              popupContent: "南潮高尔夫俱乐部",
            },
            {
              value: [113.352652, 23.193294],
              itemStyle: {
                color: "rgba(0, 206, 209, 1)",
              },
              popupContent: "南方医科大学",
            },
            {
              value: [113.376511, 23.248027],
              itemStyle: {
                color: "rgba(0, 206, 209, 1)",
              },
              popupContent: "大源洞",
            },
            {
              value: [113.357251, 23.174956],
              itemStyle: {
                color: "rgba(0, 206, 209, 1)",
              },
              popupContent: "广州天河汽车客运站",
            },
            {
              value: [113.306084, 23.163793],
              itemStyle: {
                color: "rgba(0, 206, 209, 1)",
              },
              popupContent: "云台花园",
            },
          ],
        },
        {
          type: "lines",
          _cione_layer: true,
          coordinateSystem: "geo",
          zlevel: 2,
          data: [],
        },
        {
          type: "map",
          _cione_layer: true,
          map: "polygonLayer",
          aspectScale: 1,
          zoom: 0.1,
          showLegendSymbol: false,
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 14,
          },
          itemStyle: {
            areaColor: "rgba(31, 147, 255, 0.73)",
            borderWidth: 2,
            borderColor: "rgba(0, 206, 209, 1)",
            opacity: 1,
          },
          data: [
            {
              type: "FeatureCollection",
              features: [
                {
                  type: "Feature",
                  properties: {
                    popupContent: "广州体育馆",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.29631, 23.188776],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "东坑山",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.344891, 23.204986],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "南潮高尔夫俱乐部",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.343166, 23.232884],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "南方医科大学",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.352652, 23.193294],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "大源洞",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.376511, 23.248027],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "广州天河汽车客运站",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.357251, 23.174956],
                  },
                },
                {
                  type: "Feature",
                  properties: {
                    popupContent: "云台花园",
                  },
                  geometry: {
                    type: "Point",
                    coordinates: [113.306084, 23.163793],
                  },
                },
              ],
            },
          ],
        },
      ],
    };
    return option;
  }

  return {
    getOption,
  };
}
